<template>
  <div class="article-container">
    <el-row>
      <el-col :span="22" :offset="1">
        <!--卡片-->
        <card class="table-container" cardName="评论列表" :scalable="false">
          <!--工具栏-->
          <tool-bar slot="tool" @receiveKeyword="receiveKeyword" @emptyQuery="emptyQuery" class="toolbar">
            <div slot="buttonContainer" class="button-all-container">
              <!--工具栏上第一个按钮-->
              <!--<div class="btn-container" v-if="hasPermission('comment:check')">-->
                <!--<el-button class="toolbar-button" @click="openBatchCheckModal">-->
                  <!--<i class="iconfont icon-shenhe"></i>-->
                  <!--批量审核-->
                <!--</el-button>-->
              <!--</div>-->
              <!--<div class="btn-container" v-if="hasPermission('comment:delete')">-->
                <!--<el-button class="toolbar-button" @click="batchDeleteComment">-->
                  <!--<i class="iconfont icon-shanchu"></i>-->
                  <!--批量删除-->
                <!--</el-button>-->
              <!--</div>-->
            </div>
            <div slot="customContainer" class="custom-container">
              <el-select v-model="query.commentStatus" class="status-select" placeholder="请选择状态">
                <el-option
                  v-for="item in statusArray"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-input class="ip-input" placeholder="根据ip进行搜索" size="medium" v-model="query.ip"></el-input>
            </div>
          </tool-bar>

          <!--卡片里的内容-->
          <el-table
            slot="content"
            ref="commentTable"
            :data="commentData"
            stripe
            border
            :fit="true"
            style="width: 100%"
            @select="selectComment"
            @select-all="selectComment"
            :cell-style="cellStyle"
            :key="tableKey">
            <!--<el-table-column-->
              <!--align="center"-->
              <!--type="selection"-->
              <!--:selectable=""-->
              <!--min-width="55">-->
            <!--</el-table-column>-->
            <el-table-column
              prop="author"
              label="作者信息"
              min-width="250">
              <template slot-scope="scope">
                <div class="table-row-photo" :style="{
                  'background': `url('${scope.row.authorPhoto}') no-repeat 0 0`,
                  'background-size': 'cover'}"></div>
                <span>{{scope.row.authorName}}</span>
                <div class="user-location">
                  <i class="iconfont icon-weizhi"></i>
                  <span>{{scope.row.location}}</span>
                </div>
                <div class="user-ip">
                  <i class="iconfont icon-ip"></i>
                  <span>{{scope.row.authorIp}}</span>
                </div>
                <div class="comment-time">
                  <i class="iconfont icon-shijian"></i>
                  <span>{{scope.row.createTime}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="article"
              label="评论内容"
              min-width="600">
              <template slot-scope="scope">
                <div class="comment-article">
                  <div class="comment-article-in">
                    <span v-if="scope.row.aid != 0">原文章：</span>
                    <span v-else>板块：</span>
                    <a
                      v-if="scope.row.aid != 0"
                      :href="'http://www.tsinglog.online/article/' + scope.row.aid">
                      {{scope.row.article}}</a>
                    <a
                      v-else
                      :href="'http://www.tsinglog.online/guestBook'">
                      {{scope.row.article}}</a>
                  </div>
                </div>
                <div class="comment-content">
                  <p>{{scope.row.commentContent}}</p>
                  <div class="pre-comment" v-if="scope.row.preComment && scope.row.preComment !== '原评论已经被删除'">
                    <i class="iconfont icon-zhuangshiyongyinhao"></i>
                    <p class="pre-title">
                      引用
                    </p>
                    {{scope.row.preFloor}}楼{{scope.row.preAuthorName}}于{{scope.row.createTime}}发表的:
                    <span>{{scope.row.preComment}}</span>
                  </div>
                  <div class="pre-comment" v-if="scope.row.preComment === '原评论已经被删除'">
                    <i>{{scope.row.preComment}}</i>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="supportCount"
              label="赞"
              min-width="40">
            </el-table-column>
            <el-table-column
              align="center"
              prop="opposeCount"
              label="踩"
              min-width="40">
            </el-table-column>
            <el-table-column
              align="center"
              prop="status"
              label="状态"
              min-width="100">
              <template slot-scope="scope">
                <!--对表格中信息进行指定的显示只能使用过滤器的方式进行-->
                <el-tag
                  :type="scope.row.commentStatus | showTagColor"
                  disable-transitions>
                  {{scope.row.commentStatus | showTagContent}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="checkTime"
              label="审核时间"
              min-width="150"
            ></el-table-column>
            <el-table-column
              label="操作"
              min-width="200">
              <template slot-scope="scope">
                <span v-if="!hasPermission('comment:delete') && !hasPermission('comment:check')">-</span>
                <el-button
                  size="small"
                  type="danger"
                  v-if="hasPermission('comment:delete')"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                <el-button
                  v-if="scope.row.commentStatus == 1 && hasPermission('comment:check')"
                  size="small"
                  type="primary"
                  @click="handleCheck(scope.$index, scope.row)">审核</el-button>
                <el-button
                  v-if="scope.row.commentStatus != 1 && !ifUserCanCheckComment(scope.row.authorName) && hasPermission('comment:check')"
                  size="small"
                  type="info"
                  @click="handleModify(scope.$index, scope.row)">修改</el-button>
              </template>
              <!--v-if="scope.row.commentStatus != 1 && scope.row.authorName != '超级管理员' && hasPermission('comment:check')"-->
            </el-table-column>
          </el-table>
        </card>
      </el-col>
    </el-row>
    <pagination
      :total="total"
      @getCurrentPage="getCurrentPageFromPagination"></pagination>
    <check-comment-template
      ref="checkCommentTemplate"
      @loadTable="loadTableForComment"
      :commentFromParent="commentForUpdate"></check-comment-template>
    <batch-check-template
      ref="batchCheckTemplate"
      :multiSelections="multiSelections"
      @loadTable="loadTableForComment"
      ></batch-check-template>
  </div>
</template>

<script>
  import Card from 'components/common/card/Card';
  import Pagination from 'components/common/pagination/Pagination';
  import ToolBar from 'components/content/toolbar/ToolBar';
  import CheckCommentTemplate from './subView/CheckCommentTemplate';
  import BatchCheckTemplate from './subView/BatchCheckTemplate'

  import {getCommentByPage, getCommentById, deleteByIds} from "../../network/viewsRequest/comment";
  import {hasPermission, ifUserCanCheckComment} from "../../common/permission";


  import {PORTAL_SERVER_URL} from "../../common/const";

  export default {
    name: 'CommentView',
    data() {
      return {
        query: {
          ip: '',
          keyword: '',
          commentStatus: null,
          currentPage: 1,
          pageSize: 10,
        },
        statusArray: [{
          value: 1,
          label: '尚未审核'
        }, {
          value: 2,
          label: '审核通过'
        }, {
          value: 3,
          label: '审核失败'
        }],
        commentData: [],
        multiSelections: [],
        total: 0,
        commentForUpdate: {}, // 修改审核信息时，传入给对应模态框的数据
      }
    },
    filters: {
      showTagColor(status) {
        const bindColor = {
          1: 'info',
          2: 'primary',
          3: 'danger'
        }
        return bindColor[status];
      },
      showTagContent(status) {
        const bindContent = {
          1: '尚未审核',
          2: '审核通过',
          3: '审核失败'
        }
        return bindContent[status];
      }
    },
    methods: {
      hasPermission(permission) {
        return hasPermission(permission);
      },
      ifUserCanCheckComment(authorName) {
        return ifUserCanCheckComment(authorName);
      },
      /**
       * 清空搜索条件
       */
      emptyQuery() {
        this.query = {};
        this.loadTableForComment();
      },
      /**
       * 设置表格中单元格的样式
       * @param cell 单元格信息
       */
      cellStyle(cell) {
        // 1.对已经经过审核的评论加上背景色以示区分
        if (cell.row.commentStatus != 1) {
          return {
            'background-color': '#efffff',
          }
        }
        // 2.给`评论内容`列设置样式
        if (cell.columnIndex === 1) {
          return {
            overflow: 'visible',
            'padding-top': 0,
            'padding-bottom': 0,
            'vertical-align': 'top',
          }
        }

      },
      /**
       * 用户在点击分页插件时，获取用户点击到的是第几页
       */
      getCurrentPageFromPagination(page) {
        this.query.currentPage = page;
        this.loadTableForComment();
      },
      /**
       * 点击多选框时触发的方法
       * @param selection 已经选中的集合，
       * @param row 当前选中的行
       */
      selectComment(selection, row) {
        this.multiSelections = selection;
      },
      /**
       * 审核评论
       * @param index 索引值
       * @param row 评论内容
       */
      handleCheck(index, row) {
        // 打开对应的模态框进行操作
        this.$refs.checkCommentTemplate.show(row);
      },
      /**
       * 删除评论
       * @param index 索引值
       * @param row 评论内容
       */
      handleDelete(index, row) {
        this.$confirm('是否要删除这条评论？', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let delIds = [];
          delIds.push(row.id);
          deleteByIds(delIds.join(",")).then(res => {
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '删除成功'
              });
              this.loadTableForComment();
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '删除操作已经被取消'
          })
        })

      },
      /**
       * 修改审核信息
       * @param index 索引值
       * @param row 评论内容
       */
      handleModify(index, row) {
        getCommentById(row.id).then(res => {
          if (res.code == 1) {
            this.commentForUpdate = res.data;
            this.$refs.checkCommentTemplate.show();
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
            this.commentForUpdate = {}
          }

        })
      },
      /**
       * 接收子组件toolbar传递过来的搜索关键字keyword
       * @param keyword 搜索关键字
       */
      receiveKeyword(keyword) {
        this.query.keyword = keyword;
        this.query.currentPage = 1;
        this.loadTableForComment();
      },
      /**
       * 分页获取评论信息
       */
      loadTableForComment() {
        getCommentByPage(this.query).then(res => {
          if (res.code == 1) {
            let list = res.data.items.map(item => {
              item.authorPhoto = PORTAL_SERVER_URL + '/static/images/avatar/' + item.authorPhoto;
              return item;
            })
            this.commentData = list;
            this.total = res.data.total;
          } else {
            this.commentData = [];
            this.total = 0;
          }

        })
      },
      /**
       * 用户点击`批量审核`按钮时，打开批量审核的模态框
       */
      openBatchCheckModal() {
        // 1.检查有没有进行选择
        if (this.multiSelections.length == 0) {
          this.$message({
            type: "error",
            message: '请先选择需要操作的记录！'
          });
          return;
        }
        this.$refs.batchCheckTemplate.show();
      },
      /**
       * 批量删除评论
       */
      batchDeleteComment() {
        // 1.检查有没有进行选择
        if (this.multiSelections.length == 0) {
          this.$message({
            type: "error",
            message: '请先选择需要操作的记录！'
          });
          return;
        }

        // 2.进行操作
        this.$confirm('是否要删除这条评论？', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let delIds = this.multiSelections.map(item => {
            return item.id;
          })
          deleteByIds(delIds.join(",")).then(res => {
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '批量删除成功'
              });
              this.loadTableForComment();
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '批量删除操作已经被取消'
          })
        })

      },
    },
    mounted() {
      // 1.获取评论数据
      this.loadTableForComment();
    },
    computed: {
      /**
       * 给表格的key赋值，只有当commentData的内容发生变化时，才会刷新表格
       * @returns {number}
       */
      tableKey() {
        let result = 0;
        for (let i = 0; i < this.commentData.length; i++) {
          result += this.commentData[i].updateTime;
        }
        return result;
      }
    },
    components: {
      Card,
      Pagination,
      ToolBar,
      CheckCommentTemplate,
      BatchCheckTemplate
    }
  }
</script>

<style scoped>
  .toolbar-button {
    width: 120px;
    height: 36px;
    padding: 0 20px 0 15px;
    vertical-align: middle;
  }
  .custom-container {
    display: inline-block;
  }
  .table-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .btn-container {
    margin-right: 5px;
  }

  .el-card {
    margin-top: 30px;
  }
  .editBtn {
    background-color: #409EFF;
    border: 1px solid #409EFF;
    color: #fff
  }
  .table-row-photo {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 15px;
    border-radius: 5px;
  }
  .user-location {
    margin-top: 10px;
    color: #aaa;
    font-size: 12px;
  }
  .user-ip {
    color: #aaa;
    font-size: 12px;
  }
  .user-ip>i,.user-location>i {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
  }
  .user-location>i {
    font-size: 16px;
    margin-right: 3px;
  }
  .comment-time {
    color: #aaa;
    font-size: 12px;
  }
  .comment-time>i {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
    font-size: 13px;
  }
  .comment-article {
    width: 100%;
    padding-left: 5px;
    margin-top: 10px;
  }
  .comment-article-in {
    width: 95%;
    margin: 0 auto;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 5px;
  }
  .comment-article-in a {
    color: #3e6ef9;
  }
  .comment-content {
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
  }
  .pre-comment {
    background-color: #eee;
    padding: 15px;
    margin: 10px;
    border-radius: 5px;
  }
  .pre-comment i {
    vertical-align: middle;
    color: #999;
    margin-right: 5px;
  }
  .pre-comment p {
    display: inline-block;
  }
  .pre-comment span {
    display: block
  }
  .pre-title {

  }
  .el-select {
    width: 120px !important;
    height: 36px !important;
    margin-left: 10px;
  }
  .ip-input {
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    width: 140px;
  }
  .button-all-container {
    vertical-align: bottom;
  }
</style>

<style>
  .el-input__inner {
    height: 36px !important;
    vertical-align: middle;
  }
  .el-table .cell, .el-table th div {
    overflow: visible !important;
  }
  .el-select-dropdown__wrap {
    margin-bottom: 0px !important;
  }

  .el-button--default:first-child i,
  .el-button--default:last-child i {
    font-size: 14px;
  }

  .el-button--default span {
    font-size: 14px !important;
  }
  .button-all-container {
    display: inline-block;
  }

  .el-button {
    margin-left: 0px !important;
    margin-right: 10px;
  }
</style>
